<template>
  <div class="pos">
        <el-row >
          <!-- left -->
           <el-col :span="8" class="pos-order" id="order-list" >
             <div class="grid-content bg-purple-dark">
                <el-tabs >
                  <!-- 01点餐 -->
                  <el-tab-pane label="点餐">
                    <!-- 3个表格布局 -->
                    <el-table :data='tableData' border style="width:100%">
                       <el-table-column prop='goodsName' label="商品名称"></el-table-column>
                       <el-table-column prop='count' label="数量" width="70"></el-table-column>
                       <el-table-column prop='price' label="金额" width="90"></el-table-column>
                       <el-table-column label="操作" width="110" fixed="right">
                         <template  slot-scope="scope">
                           <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                           <el-button type="text" size="small" @click="addOrderLilst(scope.row)">增加</el-button>
                         </template>
                       </el-table-column>
                    </el-table>
                    <!-- 数量和结算 -->
                    <div class="totalDiv">
                        <small>数量：</small>
                        <strong>{{totalCount}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
                        <small>总计：</small>
                        <strong>{{totalMoney}}</strong> 元
                    </div>

                    <!-- 3个btn -->
                    <div class="order-btn">
                        <el-button type='warning'>挂单</el-button>
                        <el-button type='danger' @click="delAllGoods()" >删除</el-button>
                        
                        <el-button type='success' @click="checkout()" >结账</el-button>
                    </div>

                  </el-tab-pane>
                  <!-- 02挂单 -->
                  <el-tab-pane label="挂单">
                     
                  </el-tab-pane>
                  <!-- 03外卖-->
                  <el-tab-pane label="外卖">
                        000
                  </el-tab-pane>
                  <!-- end -->
                </el-tabs>
             </div>
           </el-col>
          <!--right -->
           <el-col :span="16">
             <!-- top -->
             <div class="often-goods">
                <div class="title">常用商品</div>
                <div class="often-goods-list">
                  <ul>
                    <li  v-for="(goods,index) in oftenGoods"  @click="addOrderLilst(goods)"  :key="index" >
                       <span>{{goods.goodsName}}</span>
                        <span class="o-price">￥{{goods.price}}元</span>
                    </li>
                  </ul>
                </div>
             </div>
             <!-- center -->
             <div class="goods-type">
                <el-tabs>
                  <el-tab-pane label="汉堡">
                        <div>
                          <ul class='cookList'>
                            <li v-for="goods in type0Goods" :key='goods.goodsId'  @click="addOrderLilst(goods)">
                              <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                              <span class="foodName">{{goods.goodsName}}</span>
                              <span class="foodPrice">￥{{goods.price}}元</span>
                            </li>
                          </ul>
                        </div>
                  </el-tab-pane>
                  <el-tab-pane label="小食">
                          <ul class='cookList'>
                            <li v-for="goods in type1Goods" :key='goods.goodsId'  @click="addOrderLilst(goods)">
                              <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                              <span class="foodName">{{goods.goodsName}}</span>
                              <span class="foodPrice">￥{{goods.price}}元</span>
                            </li>
                          </ul>
                  </el-tab-pane>
                  <el-tab-pane  label="饮料">
                        <ul class='cookList'>
                            <li v-for="goods in type2Goods" :key='goods.goodsId'  @click="addOrderLilst(goods)">
                              <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                              <span class="foodName">{{goods.goodsName}}</span>
                              <span class="foodPrice">￥{{goods.price}}元</span>
                            </li>
                          </ul>
                  </el-tab-pane>
                  <el-tab-pane  label="套餐">
                        <ul class='cookList'>
                            <li v-for="goods in type3Goods" :key='goods.goodsId'  @click="addOrderLilst(goods)">
                              <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                              <span class="foodName">{{goods.goodsName}}</span>
                              <span class="foodPrice">￥{{goods.price}}元</span>
                            </li>
                          </ul>
                  </el-tab-pane>
                </el-tabs>
             </div>
           </el-col>
           <!-- end -->
        </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      msg: "",
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0
    };
  },
  created() {
    //常用商品链接
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        console.log(response);
        this.oftenGoods = response.data;
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
    //拉取分类商品数据
    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(response => {
        console.log(response);
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
  },
  mounted() {
    var orderHeiht = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeiht + "px";
  },
  methods: {
    addOrderLilst(goods) {
      // totalMoney:0,
      // totalCount:0
      this.totalMoney = 0;
      this.totalCount = 0;
      console.log(goods);
      //商品是否已经存在于订单列表之中
      let ishave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          ishave = true;
        }
      }
      //根据判断的植编写业务逻辑
      if (ishave) {
        //改变列表中的商品数量
        let arr = this.tableData.filter(a => a.goodsId == goods.goodsId);

        arr[0].count++;
        console.log("改变列表中的商品数量");
        console.log(arr);
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };

        this.tableData.push(newGoods);
        console.log("改变列表中的商品数量55");
        console.log(this.tableData);
        this.getAllMonent();
      }
    },
    //单选删除功能
    delSingleGoods(goods) {
      this.tableData = this.tableData.filter(a => a.goodsId != goods.goodsId);
      this.getAllMonent();
    },
    //全部删除功能
    delAllGoods(){
      this.tableData=[];
      this.totalMoney = 0;
      this.totalCount = 0;
    },
    //结账
    checkout(){
      if(this.totalCount!=0){
           this.tableData=[];
           this.totalMoney = 0;
           this.totalCount = 0;
           this.$message({
             message:'结账成功',
             type:'success'
           })
      }else{
         this.$message.error("金额为0 不能提交")
      }
    },
    //汇总数量金额
    getAllMonent() {
      this.totalMoney = 0;
      this.totalCount = 0;
      if (this.tableData) {
        //遍历商品 计算汇总金额和数量
        this.tableData.forEach(element => {
          this.totalCount += element.count; //数量
          this.totalMoney = this.totalMoney + element.price * element.count; //总价
        });
      }
    }
  }
};
</script>

<style scoped>
.pos-order {
  background-color: #f9fafc;
  height: 100%;
  border-right: 1px solid #000;
}
.order-btn {
  text-align: center;
  margin-top: 10px;
}
.title {
  height: 20px;
  text-align: left;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
}
.often-goods-list ul li {
  float: left;
  padding: 10px;
  margin: 10px;
  background: #ffffff;
  border: 1px solid #e5e9e2;
  list-style: none;
}
.o-price {
  color: #58b7ff;
}
.goods-type {
  clear: both;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 14px;
  padding-left: 10px;
  color: brown;
  overflow: hidden;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.totalDiv {
  height: auot;
  overflow: hidden;
  text-align: right;
  font-size: 16px;
  background-color: #fff;
  border-bottom: 1px solid #e5e9f2;
  padding: 10px;
}
</style>
